<template>
    <div class="comment">
        <h3>发表评论</h3>
        <hr class="hr">
        <textarea name="" cols="30" rows="3" placeholder="请输入BB的内容(最多120字)" maxlength="120" v-model="content"></textarea>
        <mt-button size="large" type="primary" @click='submitcon'>发表评论</mt-button>
        <ul class="pl">
            <li v-for="(com,index) in comments" :key="index+1">
                <div class="pl_title">
                    <span>第{{index+1}}楼</span>
                    <span>用户&nbsp;:&nbsp;{{com.name}}</span>
                    <span>发表时间&nbsp;:&nbsp;{{com.date}}</span>
                </div>
                <div class="pl_body">
                    {{com.content}}
                </div>
            </li>
        </ul>
        <mt-button size="large" type="danger" :plain='true' >加载更多</mt-button>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {

    props:['newsID'],
    data() {
        return {
            content:'',
            comments:[]
        }
    },
    created(){
        this.getcomment();
    },
    methods:{
        submitcon(){
            if (this.content=='') {
                Toast('评论不能为空!');
            }else{
                let user={
                    name:'匿名用户',
                    date:new Date,
                    content:this.content
                }
                this.comments.unshift(user);
            }
        },
        getcomment(){
            this.$http({
                url:'https://locally.uieee.com/categories/1/shops?id='+this.newsID,
                method:'get'
            }).then(res=>{
                // console.log(res);
              this.comments=res.data[0].comments;
                
            })
        }
    }
}
</script>
